// pages/game/game.js
var TIME = 60;
Page({

//非常重要*****
//只有写在  data  里面的属性才能在wxml中使用
//数据双向绑定
    data: {
//表示色块行数的  属性
    row: 2,
//盛放色块详细信息的数组
    items: [],
//倒计时时间
    time: TIME,
    score:0,//分数

    step:0//步数
},
//初始化页面的调用
//可以在  这个函数中  初始化  不在wxml中使用的属性
    onLoad: function () {
    this.width = 750;
    this.getDeviceWidth();

    this.gameCore();
//初始化titles的数组
    this.titles = ["1", "2", "3", "4"];
//获取title的下标
    this.titleIndex = 0;
  },


//游戏的核心部分
    gameCore: function () {
//每一个色块的宽度
    var tempColorViewWidth = this.width / this.data.row;//平均分的临时色块宽度
    var space = tempColorViewWidth * 0.1;//计算后的色块间距
    var allSpace = space * (this.data.row + 1);//总间距
//色块的宽度 =  （总宽度  -   总距离）  /   每行色块数
    var colorViewWidth = (this.width - allSpace) / this.data.row;
//获取随机的颜色
    var color = this.randColor();
// 设置特殊颜色是哪一个色块
    var allNums = this.data.row * this.data.row;
    var specialIndex = parseInt(Math.random() * allNums);
    var tempList = [];
 //循环创建色块信息，放入数组
    for (var i = 0; i < allNums; i++) {
      var info = {
        width: colorViewWidth,
        color: color,
        space: space,
        opacity: i == specialIndex ? 0.5 : 1
      }
      tempList.push(info);
    }
    this.setData({
      items: tempList
    });

  },


 //随机颜色的函数
  randColor: function () {
    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    "rgb(1,2,5)"
    return "rgb(" + r + "," + g + "," + b + ")";
  },

  //获取函数设备的宽度
  getDeviceWidth: function () {
    wx.getSystemInfo({
      success: function (res) {
        this.width = res.windowWidth;
      }.bind(this)
    })
  },
  success: function () {
    //成功时候 更新行数row的值
    //如果做难度扩展  可以添加专门改变this.data.row的值的函数
    this.setData({
      row: ++this.data.row,
      step:++this.data.step
    });
    //走五部给一分
    if(this.data.step %5== 0){
       this.setData({
           score: ++this.data.score
       })
    }
    if (this.data.step %2  == 0) {
          ++this.titleIndex;
    }
    if (this.titleIndex >= this.titles.length) {
          this.titleIndex = this.titles.length-1;
    }
   
  },
  //
getTitle:function(){
  return this.titles[this.titleIndex];
},
  fail: function () {
    //重置时间状态、行数
    this.setData({
      row: 2,
      time: TIME,
      score:0
    });
    

    clearInterval(this.timer);//清楚定时器
    this.timer = null;
    wx.showModal({
      title: '温馨提示',
      content: this.getTitle()+'你就是个色盲',//todo ： 暂时  写死  ，后面根据等级的名字提示
      showCancel: true,
      cancelText: '返回',
      cancelColor: 'blue',
      confirmText: '继续游戏',
      confirmColor: 'orange',
      success: function (res) {
        console.log(res);
        //点击重新开始（cancel）返回是上一页
        //点击继续游戏（cancel）重新开始游戏
        res.cancel ? this.back() : this.reStartGame();
      }.bind(this),

    })
    this.titleIndex  =   0;
  },
  back: function () {
    wx.navigateBack();
    //todo上传分数到服务器 

  },
  reStartGame: function () {
    this.timer = setInterval(this.updataTime, 1000);
    this.gameCore();
  },

  chooseAction: function (e) {
    var opacity = e.currentTarget.dataset.opacity;
    opacity == 1 ? this.fail() : this.success();

    this.gameCore();

  },
  //更新时间的函数
  updataTime: function () {
    this.setData({
      time: --this.data.time
    });
    if (this.data.time <= 0) {
      this.fail();
    }
  },

  //页面显示时候调用
  onShow: function () {
    this.timer = setInterval(this.updataTime, 1000);
    this.playMusic();
  },
    playMusic: function() {
      wx.playBackgroundAudio({
        dataUrl: 'http://bmob-cdn-19196.b0.upaiyun.com/2018/05/16/121edcf340e9852280d9ab0b3b236228.mp3'
      })
    },
  
  stopMusic:function(){

  },
  
  onUnload: function () {
    clearInterval(this.timer);
    this.timer = null;
  }
})